<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../../target/classes/static/js/jquery-3.2.1.min.js"></script>
    <script src="../../../../target/classes/static/js/echarts.min.js"></script>
	<script src="../static/js/my.js"></script>
    <style>

        html,body{
            height: 100%;
        }
    </style>

</head>
<body>

        <!--   两个下拉框     -->
        <div style="position: absolute;left: 40%;">
           
           
		
			 <input type="button" class="layui-btn layui-btn-radius layui-btn-warm" onclick="biao()" value="以表格形式查看" >
        </div>
        <!--创建一个容器-->

        <div id="main" style="position: absolute;top:50px;width: 100%;height: 100%";></div>


</body>
</html>
<script>
    //定义jquery文档加载事件
    $(function(){
       
      bing();



    })
    //饼图 函数
    function bing() {

        //拿到用户选中的查询时间
        var time=$("#time").val();
      if(time==null)
	  time="2020-4月";
        //发送ajax请求
        $.ajax({
            url:address+"/check/bingAjax",
            type:"get",
            data:{"time":time},
            dataType:"json",
            success:function(data){
                // 基于准备好的dom，初始化echarts实例
				
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
					
					    color:['#c060ff','#ff8060','#00ff40','#40c0ff','#ffff80'],
						title: {
							text: "本公司"+time+"考勤人数统计",
							
							left: 'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							left: 'center',
							top: 'bottom',
							data: data.info,
						},
						toolbox: {
							show: true,
							feature: {
								mark: {show: true},
								dataView: {show: true, readOnly: false},
								restore: {show: true},
								saveAsImage: {show: true}
							}
						},
						series: [
							
							{
								name:"人数",
								type: 'pie',
								radius: [100, 200],
								center: ['50%', '50%'],
								roseType: 'area',
								itemStyle: {
									borderRadius: 5
								},
								data: data.info,
							}
						]
					};
				
               
                myChart.setOption(option);
            }
        })
    }




   
	
	function biao()
	{
		window.location.href="check.html";
		
	}
</script>